<template>
    <el-dialog
        width="3.5rem"
        title="图层控制"
        append-to-body
        :visible="visible"
        @update:visible="(val) => $emit('update:visible', val)"
    >
        <!--        <h3 style="marginTop: -10px;">监测点位</h3>-->
        <!--        <el-checkbox-group v-model="val">-->
        <!--            <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{-->
        <!--                item.label-->
        <!--            }}</el-checkbox>-->
        <!--        </el-checkbox-group>-->
        <h3 style="marginTop: -.05rem;">基础图层</h3>
        <el-switch
            v-model="basemap"
            active-text="底图"
            style="margin-right: .15rem;"
            @change="basemapHandle"
        />
        <el-switch v-model="terrain" active-text="地形" @change="terrainHandle" />
        <div style="height:1px;backgroundColor:#eee;marginTop: .1rem;"></div>
        <h3 style="marginTop: .15rem;">实景模型渲染精度</h3>
        <el-slider
            v-model="maximum"
            :step="1"
            :min="1"
            :max="64"
            show-input
            @change="maximumScreenSpaceErrorHandle"
            @input="maximumScreenSpaceErrorHandle"
        />
        <p>* 数值越小，精度越高，加载数据量更大，大范围倾斜摄影实景建议值：16 ~ 32</p>
        <div style="height:1px;backgroundColor:#eee;marginTop: .1rem;"></div>
        <h3 style="marginTop: .1rem;">地图切换</h3>
        <el-switch v-model="showOnLine" active-text="在线地图" inactive-text="离线地图" />
    </el-dialog>
</template>

<script>
import { Dialog, Checkbox, CheckboxGroup, Switch, Slider } from "@/component/ElementUi";
import { Cesium, AppGlobalConfig } from "@/public/global/const";

import { MonitorMap } from "@/view/client/component/TheCesiumMap/data";
import { staticComputer } from "@/public/util/vue";
const options = Object.entries(MonitorMap).map(([key, value]) => ({
    label: value.name,
    value: key,
}));

let imageryLayers = {
    baseLayer1: new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=${AppGlobalConfig.TianDiTuToken}`,
        layer: "img",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "w",
        maximumLevel: 18,
    }),
    baseLayer2: new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${AppGlobalConfig.TianDiTuToken}`,
        layer: "cia",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "w",
        maximumLevel: 18,
    }),
    // baseLayer3: new Cesium.WebMapTileServiceImageryProvider({
    //     url: `http://s0.fjmap.net/img_fj_2020_his/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&TILEMATRIXSET=Matrix_0&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}`,
    //     // url: `http://s0.fjmap.net/img_fj_2020_his/wmts`,
    //     layer: "img_his",
    //     style: "img_his",
    //     format: "image/jpeg",
    //     tileMatrixSetID: "Matrix_0",
    //     maximumLevel: 18,
    // }),
};

export default {
    name: "LayerPicker",
    components: {
        ElDialog: Dialog,
        ElCheckbox: Checkbox,
        ElCheckboxGroup: CheckboxGroup,
        ElSwitch: Switch,
        ElSlider: Slider,
    },
    props: {
        cesiumMap: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        value: {
            type: Array,
            default() {
                return [];
            },
        },
        basemap: {
            type: Boolean,
            default: true,
        },
        terrain: {
            type: Boolean,
            default: true,
        },
        maximum: {
            type: Number,
            default: 16,
        },
    },
    data() {
        return {
            options,
            showOnLine: false,
        };
    },
    computed: {
        val: {
            set(val) {
                this.$emit("input", val);
            },
            get() {
                return this.value;
            },
        },
        onlineMap: staticComputer(),
    },
    watch: {
        showOnLine(val) {
            const viewer = this.cesiumMap.viewer;
            for (const key in imageryLayers) {
                const layer = imageryLayers[key];
                layer.defaultContrast = 0.7;
                layer.defaultSaturation = 0.5;
                const layerId = key + "_layer";
                if (
                    imageryLayers[layerId] &&
                    viewer.imageryLayers.contains(imageryLayers[layerId])
                ) {
                    viewer.imageryLayers.remove(imageryLayers[layerId]);
                }
                if (val) {
                    imageryLayers[layerId] = viewer.imageryLayers.addImageryProvider(layer);
                }
            }
        },
    },
    methods: {
        terrainHandle() {
            this.$emit("terrain-handle");
        },
        basemapHandle() {
            this.$emit("basemap-handle");
        },
        maximumScreenSpaceErrorHandle(val) {
            this.$emit("maximum-handle", val);
        },
    },
};
</script>

<style scoped>
h3 {
    border-left: 4px solid #409eff;
    padding-left: 10px;
}
</style>
